<!--
/**
* @description 工作台
* @author wind-lc
* @date 2020-05-09
*/
-->
<template>
  <div class="workbench-container">
    <!-- 卡片 -->
    <a-row :gutter="[30,30]">
      <a-col :md="12"
             :lg="6"
             :xl="6"
             :xxl="6">
        <ul class="workbench-card-list workbench-card-1">
          <li class="workbench-card-item">
            <span>区域</span>
            <b>{{cardList.area}}</b>
          </li>
          <li class="workbench-card-item">
            <span>管控企业总数</span>
            <b>{{cardList.total}} 家</b>
          </li>
        </ul>
      </a-col>
      <a-col :md="24"
             :lg="18"
             :xl="12"
             :xxl="12">
        <ul class="workbench-card-list workbench-card-2">
          <li class="workbench-card-item">
            <span>重点管控企业数</span>
            <b>{{cardList.emphasis}} 家</b>
          </li>
          <li class="workbench-card-item">
            <span>限/停产已执行企业数</span>
            <b>{{cardList.executed}} 家</b>
          </li>
          <li class="workbench-card-item">
            <span>限/停产末执行企业数</span>
            <b>{{cardList.nonexecution}} 家</b>
          </li>
        </ul>
      </a-col>
      <a-col :md="12"
             :lg="6"
             :xl="3"
             :xxl="3">
        <ul class="workbench-card-list workbench-card-3">
          <li class="workbench-card-item">
            <span>今日异常数</span>
            <b>{{cardList.odayAbnormal}}</b>
          </li>
        </ul>
      </a-col>
      <a-col :md="12"
             :lg="6"
             :xl="3"
             :xxl="3">
        <ul class="workbench-card-list workbench-card-4">
          <li class="workbench-card-item">
            <span>累计异常数</span>
            <b>{{cardList.cumulativeAbnormal}}</b>
          </li>
        </ul>
      </a-col>
    </a-row>
    <!-- 卡片 -->
    <!-- 异常 -->
    <a-row :gutter="[30,30]">
      <a-col :md="24"
             :lg="24"
             :xl="12"
             :xxl="12">
        <div class="workbench-x-bar-wrapper">
          <div class="workbench-title">
            <icon-svg type="icon-time"></icon-svg>
            <span>按区域统计管控企业TOP10</span>
          </div>
          <div class="workbench-bar">
            <e-bar :option="areaAbnormalOption"
                   :ready="areaAbnormalReady"></e-bar>
          </div>
        </div>
      </a-col>
      <a-col :md="24"
             :lg="24"
             :xl="12"
             :xxl="12">
        <div class="workbench-x-bar-wrapper">
          <div class="workbench-title">
            <icon-svg type="icon-paihangbang_paiming"></icon-svg>
            <span>按行业统计管控企业TOP10</span>
          </div>
          <div class="workbench-bar">
            <e-bar :option="industryAbnormalOption"
                   :ready="industryAbnormalReady"></e-bar>
          </div>
        </div>
      </a-col>
    </a-row>
    <!-- 异常 -->
    <!-- 电量分部情况 -->
    <a-row :gutter="[30,30]">
      <a-col :md="24"
             :lg="24"
             :xl="24"
             :xxl="24">
        <div class="workbench-y-bar-wrapper">
          <div class="workbench-title">
            <icon-svg type="icon-fenbuban"></icon-svg>
            <span>产污企业电量和分布情况</span>
          </div>
          <div class="workbench-y-bar workbench-bar">
            <ul class="workbench-time-radio">
              <li v-for="item in timeTypeList"
                  :key="item.value"
                  @click="handlerTimeRadio(item.value)"
                  :class="{'workbench-time-radio-checked':item.value===timeType,'workbench-time-radio-disabled':!electricDistributionReady}">{{item.name}}</li>
            </ul>
            <e-bar :option="electricDistributionOption"
                   :ready="electricDistributionReady"></e-bar>
          </div>
        </div>
      </a-col>
    </a-row>
    <!-- 电量分部情况 -->
  </div>
</template>
<script>
import { Row, Col } from 'ant-design-vue'
import IconSvg from '@/components/IconSvg'
import EBar from '@/components/ECharts/EBar'
import {
  getHnUserByUserName,
  statisticsEntinfoCount,
  strictEntinfoCount,
  statisticsExecutedEntInfoCount,
  statisticsUnexecutedEntInfoCount,
  dayPlanWarningCount,
  planWarningCount,
  findByGroupByAreaTop,
  findByGroupByIndustryTop,
  areaPPCount
} from '@/request/api/businessOverview/workbench'
export default {
  name: 'workbench',
  components: {
    ARow: Row,
    ACol: Col,
    IconSvg,
    EBar
  },
  data () {
    return {
      // 卡片数据
      cardList: {
        area: '',
        total: 0,
        emphasis: 0,
        executed: 0,
        nonexecution: 0,
        odayAbnormal: 0,
        cumulativeAbnormal: 0
      },
      // 按区域统计管控企业TOP10图表选项
      areaAbnormalOption: {
        // 颜色
        color: ['#ffb065', '#d182f0'],
        // 鼠标悬停提示
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // 图表外间距
        grid: {
          top: '0',
          right: '10',
          bottom: '35',
          left: '0',
          containLabel: true
        },
        // x轴
        xAxis: {
          type: 'value',
          // 坐标轴留白
          boundaryGap: [0, 0],
          // 轴线
          axisLine: {
            show: false
          },
          // 轴刻度
          axisTick: {
            show: false
          },
          // 轴文字
          axisLabel: {
            color: '#333333'
          },
          // 分隔线
          splitLine: {
            interval: 0,
            lineStyle: {
              color: '#f0f0f0',
              type: 'dotted'
            }
          }
        },
        // y轴
        yAxis: {
          type: 'category',
          // 坐标轴留白
          boundaryGap: [0, 0],
          // 轴线
          axisLine: {
            show: false
          },
          // 轴刻度
          axisTick: {
            show: false
          },
          // 轴标签
          axisLabel: {
            color: '#333333'
          },
          // 分隔线
          splitLine: {
            show: false
          },
          // 轴文字
          data: []
        },
        // 数据
        series: [
          {
            type: 'bar',
            barWidth: 10,
            data: []
          }
        ]
      },
      // 按区域统计管控企业TOP10数据完成
      areaAbnormalReady: false,
      // 按行业统计管控企业TOP10图表选项
      industryAbnormalOption: {
        // 颜色
        color: ['#ffb065', '#d182f0'],
        // 鼠标悬停提示
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // 图例
        legend: {
          bottom: '0',
          icon: 'rect',
          itemHeight: 14,
          itemWidth: 14,
          data: ['今日', '昨日']
        },
        // 图表外间距
        grid: {
          top: '0',
          right: '10',
          bottom: '35',
          left: '0',
          containLabel: true
        },
        // x轴
        xAxis: {
          type: 'value',
          // 坐标轴留白
          boundaryGap: [0, 0],
          // 轴线
          axisLine: {
            show: false
          },
          // 轴刻度
          axisTick: {
            show: false
          },
          // 轴文字
          axisLabel: {
            color: '#333333'
          },
          // 分隔线
          splitLine: {
            interval: 0,
            lineStyle: {
              color: '#f0f0f0',
              type: 'dotted'
            }
          }
        },
        // y轴
        yAxis: {
          type: 'category',
          // 坐标轴留白
          boundaryGap: [0, 0],
          // 轴线
          axisLine: {
            show: false
          },
          // 轴刻度
          axisTick: {
            show: false
          },
          // 轴标签
          axisLabel: {
            color: '#333333'
          },
          // 分隔线
          splitLine: {
            show: false
          },
          // 轴文字
          data: []
        },
        // 数据
        series: [
          {
            type: 'bar',
            barWidth: 10,
            data: []
          }
        ]
      },
      // 按行业统计管控企业TOP10数据完成
      industryAbnormalReady: false,
      // 产污企业电量和分布图表选项
      electricDistributionOption: {
        // 颜色
        color: ['#4ecdd1', '#ff78a7'],
        // 鼠标悬停提示
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // 图例
        legend: {
          bottom: '0',
          icon: 'rect',
          itemHeight: 14,
          itemWidth: 14,
          data: ['电量', '产污']
        },
        // 图表外间距
        grid: {
          top: '10',
          right: '10',
          bottom: '35',
          left: '0',
          containLabel: true
        },
        // x轴
        xAxis: {
          type: 'category',
          // 坐标轴留白
          boundaryGap: [0, 0],
          // 轴线
          axisLine: {
            lineStyle: {
              color: '#f1f1f1'
            }
          },
          // 轴刻度
          axisTick: {
            show: false
          },
          // 轴标签
          axisLabel: {
            color: '#333333'
          },
          // 分隔线
          splitLine: {
            show: false
          },
          // 轴文字
          data: []
        },
        // y轴
        yAxis: {
          type: 'value',
          // 坐标轴留白
          boundaryGap: [0, 0],
          // 轴线
          axisLine: {
            show: false
          },
          // 轴刻度
          axisTick: {
            show: false
          },
          // 轴文字
          axisLabel: {
            color: '#333333'
          },
          // 分隔线
          splitLine: {
            interval: 0,
            lineStyle: {
              color: '#f0f0f0',
              type: 'dotted'
            }
          }
        },
        // 数据
        series: [
          {
            name: '电量',
            type: 'bar',
            barWidth: 22,
            data: []
          },
          {
            name: '产污',
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: []
          }
        ]
      },
      // 产污企业电量和分布时间类型
      timeTypeList: [
        {
          value: 'day',
          name: '按日'
        },
        {
          value: 'week',
          name: '按周'
        },
        {
          value: 'month',
          name: '按月'
        }
      ],
      timeType: 'day',
      // 产污企业电量和分布数据完成
      electricDistributionReady: true,
      // 用户地区信息
      userInfo: {
        userLevel: '',
        userRegion: ''
      }

    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 初始化
    async init () {
      await this.getArea()
      this.getCardData()
      this.getAreaAbnormalData()
      this.getIndustryAbnormalData()
      this.getElectricDistributionData()
    },
    // 获取用户地区信息
    getArea () {
      return new Promise((resolve, reject) => {
        const username = JSON.parse(sessionStorage.getItem('ycloud-operate-user_info')).username
        getHnUserByUserName({ username: username }).then(res => {
          if (res.code === '0') {
            this.userInfo.userLevel = res.data.userLevel
            this.userInfo.userRegion = res.data.userRegion
            this.cardList.area = res.data.userRegion
            resolve()
          } else {
            reject(res)
          }
        }).catch(error => {
          console.log(error)
          reject(error)
        })
      })
    },
    // 获取卡片数据
    getCardData () {
      statisticsEntinfoCount(this.userInfo).then(res => {
        this.cardList.total = res.total
      }).catch(error => {
        console.log(error)
      })
      strictEntinfoCount(this.userInfo).then(res => {
        this.cardList.emphasis = res.total
      }).catch(error => {
        console.log(error)
      })
      statisticsExecutedEntInfoCount(this.userInfo).then(res => {
        this.cardList.executed = res.total
      }).catch(error => {
        console.log(error)
      })
      statisticsUnexecutedEntInfoCount(this.userInfo).then(res => {
        this.cardList.nonexecution = res.total
      }).catch(error => {
        console.log(error)
      })
      dayPlanWarningCount(this.userInfo).then(res => {
        this.cardList.odayAbnormal = res.total
      }).catch(error => {
        console.log(error)
      })
      planWarningCount(this.userInfo).then(res => {
        this.cardList.cumulativeAbnormal = res.total
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取按区域统计管控企业TOP10
    getAreaAbnormalData () {
      this.areaAbnormalReady = false
      findByGroupByAreaTop(this.userInfo).then(res => {
        const y = []
        const x = []
        for (const item in res) {
          y.push(item)
          x.push(res[item])
        }
        this.areaAbnormalOption.yAxis.data = y
        this.areaAbnormalOption.series[0].data = x
        this.areaAbnormalReady = true
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取按行业统计管控企业TOP10
    getIndustryAbnormalData () {
      this.industryAbnormalReady = false
      findByGroupByIndustryTop(this.userInfo).then(res => {
        const y = []
        const x = []
        for (const item in res) {
          y.push(item)
          x.push(res[item])
        }
        this.industryAbnormalOption.yAxis.data = y
        this.industryAbnormalOption.series[0].data = x
        this.industryAbnormalReady = true
      }).catch(error => {
        console.log(error)
      })
    },
    // 产污企业电量和分布数据
    getElectricDistributionData (value = this.timeType) {
      this.electricDistributionReady = false
      const prams = this.userInfo
      prams.type = value
      areaPPCount(prams).then(res => {
        const y = []
        const x = [
          [], []
        ]
        for (const item in res[value]) {
          y.push(item)
          x[0].push(res[value][item].pp)
          x[1].push(res[value][item].blowdown)
        }
        this.electricDistributionOption.series[0].data = x[0]
        this.electricDistributionOption.series[1].data = x[1]
        this.electricDistributionOption.xAxis.data = y
        this.electricDistributionReady = true
      }).catch(error => {
        console.log(error)
      })
    },
    // 处理时间类型
    handlerTimeRadio (value) {
      this.timeType = value
      this.getElectricDistributionData(value)
    }
  },
  // 生成假数据
  getData (lenght) {
    const arr = []
    for (let i = 0; i <= lenght; i++) {
      arr.push(Math.floor(Math.random() * (28 - 5 + 1) + 5))
    }
    return arr
  },
  // 生成x轴假数据
  getXData (lenght) {
    const arr = []
    for (let i = 0; i <= lenght; i++) {
      arr.push(i)
    }
    return arr
  }
}
</script>
<style lang="scss">
.workbench-container {
  background-color: #ffffff;
  height: 100%;
  padding: 30px;
  overflow-x: hidden;
  overflow-y: auto;
}
/* 卡片 */
.workbench-card-list {
  height: 130px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
}
.workbench-card-1 {
  background-image: linear-gradient(225deg, #45dae9 0%, #21c0c5 100%);
  box-shadow: 0 4px 20px 0 rgba(14, 158, 164, 0.5);
  .workbench-card-item::before {
    background-color: #72e8ec;
  }
}
.workbench-card-2 {
  background-image: linear-gradient(45deg, #ff9c3f 0%, #ffb94a 100%);
  box-shadow: 0 4px 20px 0 rgba(193, 101, 11, 0.5);
  .workbench-card-item::before {
    background-color: #ffc58d;
  }
}
.workbench-card-3 {
  background-image: linear-gradient(45deg, #ff4581 0%, #fd7fb5 100%);
  box-shadow: 0 4px 20px 0 rgba(224, 36, 99, 0.5);
}
.workbench-card-4 {
  background-image: linear-gradient(45deg, #cf60ed 0%, #6487eb 100%);
  box-shadow: 0 4px 20px 0 rgba(164, 47, 202, 0.5);
}
.workbench-card-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -2px;
    display: block;
    width: 2px;
    height: 56px;
    margin-top: -28px;
  }
  &:first-of-type::before {
    display: none;
  }
  span {
    font-size: 18px;
    color: #ffffff;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  b {
    font-size: 28px;
    color: #ffffff;
    font-weight: normal;
    width: 100%;
    text-align: center;
    text-indent: 6px;
    min-width: 100px;
    height: 28px;
  }
}
@media screen and (max-width: 1500px) {
  .workbench-card-item {
    span {
      font-size: 16px;
    }
    b {
      font-size: 24px;
    }
  }
}
/* 卡片 */
/* 异常图表 */
.workbench-x-bar-wrapper {
  background-color: #ffffff;
  box-shadow: 0 4px 20px 0 rgba(210, 210, 210, 0.5);
  border-radius: 10px;
  .workbench-title {
    border-bottom: 2px solid #efefef;
  }
}
.workbench-title {
  padding: 30px 30px 15px 30px;
  .icon-svg {
    font-size: 20px;
  }
  span {
    font-size: 20px;
    color: #333333;
    margin-left: 10px;
  }
}
.workbench-bar {
  padding: 30px;
  height: 423px;
}

/* 异常图表 */
/* 产污企业电量和分布图表 */
.workbench-y-bar-wrapper {
  .workbench-title {
    padding-top: 0;
  }
}
.workbench-y-bar {
  background-color: #ffffff;
  box-shadow: 0 4px 20px 0 rgba(210, 210, 210, 0.5);
  border-radius: 10px;
  position: relative;
  padding-top: 40px;
}
.workbench-time-radio {
  position: absolute;
  top: 0;
  right: 30px;
  display: flex;
  li {
    padding: 15px 10px 5px 10px;
    cursor: pointer;
    position: relative;
  }
  .workbench-time-radio-checked::after {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background-color: #1890ff;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -9px;
  }
  .workbench-time-radio-disabled {
    cursor: wait;
  }
}
/* 产污企业电量和分布图表 */
</style>
